<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>XXX后台管理</title>
    <script src="js/jquery-3.2.1.js"></script>
    <script src="layui/layui.js"></script>
    <script src="layui/lay/modules/layer.js"></script>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="layui/css/modules/layer/default/layer.css">
</head>
<body>
<form style="display: flex;justify-content: flex-end;margin-top: 8px" method="post" class="layui-form"
      action="addRole">
    <div style="margin: 0;padding: 0" class="layui-form-item">
        <label class="layui-form-label">新角色名称</label>
        <div class="layui-input-block">
            <input type="text" name="r_name" required lay-verify="required" placeholder="请输入角色名称" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div style="margin: 0;padding: 0" class="layui-form-item">
        <label class="layui-form-label">角色说明</label>
        <div class="layui-input-block">
            <input type="text" name="r_explain" required lay-verify="required" placeholder="请输入新角色说明" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div style=";margin: 0;padding: 0" class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">添加</button>
        </div>
    </div>
</form>
<table style="border: solid red 1px" id="demo" lay-filter="test"></table>
<script>
    layui.use('table', function () {
        var table = layui.table;

        //第一个实例
        table.render({
            elem: '#demo'
            , height: 500
            , url: 'FindAllRoleList/' //数据接口
            , cols: [[ //表头
                {field: 'r_id', title: '编号', width: 80, align: 'center', sort: true, fixed: 'left'}
                , {field: 'r_name', title: '角色'}
                , {field: 'r_explain', title: '说明'}
                , {field: 'title', title: '查看用户', align: 'center', templet: '#role_manager_List'}
                , {field: 'title', title: '查看权限', align: 'center', templet: '#role_permissions_List'}
                , {field: 'title', title: '删除', align: 'center', templet: '#shanchu', event: 'shanchu'}
            ]]
            , page: false //开启分页
        });

        table.on('tool(test)', function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            //删除
            if (layEvent === 'shanchu') { //删除
                layer.confirm('确定将删除 ' + data.r_name + '  角色吗？', function (index) {
                    //向服务端发送删除指令
                    $.ajax({
                        type: "post",
                        url: "shanchuRoleByRId",
                        data: {"r_id": data.r_id},
                        success: function (res) {
                            if (res.code == 1) {
                                layer.close(index);
                                layer.msg("删除成功！", {icon: 1});
                                // obj.del();
                                window.location.reload();
                            } else {
                                layer.msg("发生错误！", {icon: 5})
                            }
                        }
                    });
                    layer.close(index);
                });
            }
        });
    });
</script>


<script>
    layui.use('form', function () {
        var form = layui.form;
        //监听提交
        form.on('submit(formDemo)', function (data) {
            var canSubmit = false;
            $.ajax({
                type: 'POST',
                url: "check_role_name",
                data: data.field,
                success: function (res) {
                    if (res.statusCode == "-1") {
                        layer.msg(res.message, {icon: 5, anim: 6});
                        $("input[name=r_name]").focus();
                        $("input[name=r_name]").addClass("layui-form-danger");
                        canSubmit = false;
                    } else {
                        canSubmit = true;
                    }
                },
                error: function (res) {
                    layer.alert("发生异常！");
                }
            });
            if (canSubmit) {
                return true;
            } else {
                return false;
            }
        });
    });
</script>

<script type="text/html" id="lahei">
    {{#  if(d.manager_status ==1){ }}
    <a href="javascript:;" class="layui-table-link">拉黑/恢复</a>
    {{#  } }}
</script>

<script type="text/html" id="status">
    {{#  if(d.manager_status ==1){ }}
    正常
    {{#  } }}
    {{#  if(d.manager_status ==-1){ }}
    <span style="color: red"> 黑名单</span>
    {{#  } }}
</script>

<script type="text/html" id="indexID">
    {{ d.LAY_INDEX }}
</script>
<script type="text/html" id="role">
    <a href="javascript:;" class="layui-table-link">查看角色</a>
</script>

<script type="text/html" id="role_manager_List">
    <a href="findManagerByRNamePage?r_name={{d.r_name}}" class="layui-table-link">查看用户</a>
</script>

<script type="text/html" id="role_permissions_List">
    <div style="display:flex;justify-content: space-between">
        <a href="havePermissionListPage?r_name={{d.r_name}}" class="layui-table-link">拥有权限</a>
        <a href="notHavePermissionListPage?r_name={{d.r_name}}" class="layui-table-link">未拥有权限</a>
    </div>
</script>

<script type="text/html" id="shanchu">
    <a href="javascript:;" class="layui-table-link">删除</a>
</script>
<script type="text/html" id="weihu">
    <a href="findManagerInfo?manager_id={{d.manager_id}}" class="layui-table-link">维护</a>
</script>
</body>
</html>